<template>
    <div class="row mhc-wrap">
        <div v-for="(v,i) of showImages" :key="i" class="mhc-content">
            <div class="mhc-imgWrap">
                <img :src="v.image" alt="">
            </div>
            <span :style={color:v.titleColor}>{{v.title}}</span>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
        }
    },
    computed:{
        showImages(){
            //?vuex?????
            return this.$store.getters.classificationImages;
        }
    },
    mounted() {
        this.$store.dispatch("loadClassificationData")
    }
  
}
</script>

<style lang="less">
.mhc-wrap{
    display: flex;
    flex-flow: row wrap;
    background-color: #fff;
    >.mhc-content{
        width: 20%;
        text-align: center;
        padding:0.2rem 3% 0;
        >.mhc-imgWrap{
            width:100%;
            img{
                width:100%;
            }
        }
    }

}

</style>
